<style>
    .panel-bodys {       
        padding: 15px;
    }

    .calendar-head {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .week,
    .calendar {
        display: flex;
        flex-wrap: wrap;
    }

    .week {
        margin: 15px 0;
        font-size: 18px;
        border-bottom: 1px solid;
    }

    .calendar .item,
    .week .item {
        width: calc(100% / 7);
        padding: 5px;
    }

    .week .item {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .calendar .item .day {
        font-weight: bold;
        font-size: 16px;
    }

    .calendar .item .lunar {
        font-weight: bold;
        margin-right: 5px;
    }

    .calendar .item .activate {
        background: #fff0f0;      
        color: #e02d2d;
    }
    .form-group {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background: white;
        margin: 0;
        padding: 10px 30px;
        border-top: 1px solid #f4f6f8;
    }

    .form-group div {
        display: flex;
        justify-content: flex-end;
    }

    .input-group-addons {
        padding: 10px 12px;
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        color: #555555;
        text-align: center;
        background-color: #eeeeee;      
        border-radius: 3px;
        position: relative;
    }
  
    .input-group-addons .xiu,.input-group-addons .ban{
        position:absolute;
        top:0;
        left:0;
        padding:10px;
        color: #e02d2d;
    }
    .input-group-addons .form-control{
        text-align: center;
    }
    .item .input-group-addons.order-calendar{
        background-color: rgba(24, 186, 155, 0.2);
    }
    .calendar .item .no_now{
        color: #cacaca;      
    }
    .input-group-addons .order{
        position:absolute;
        top:0;
        right:0;
        padding:10px
    }
    .u-tips-color {
        color: #909399;
    }

    [v-clock] {
        display: none;
    }
</style>
<div class="panel panel-default panel-intro" id="app">
    {:build_heading()}
    <div class="panel-bodys" v-clock>
        <!-- header -->
        <div class="calendar-head">
            <div>
                <button type="button" class="btn btn-primary" @click="toUp">上个月</button>
            </div>
            <div style="font-size: 22px;">
                <span v-text="year"></span>年
                <span v-text="formatMonth"></span>月-
                <span class="u-tips-color">{{lunarYearCn}}({{zodiacYear}})</span>
            </div>
            <div>
                <button type="button" class="btn btn-primary" @click="toNext">下个月</button>
            </div>
        </div>
        <!-- 星期 -->
        <div class="week">
            <div class="item">星期日</div>
            <div class="item">星期一</div>
            <div class="item">星期二</div>
            <div class="item">星期三</div>
            <div class="item">星期四</div>
            <div class="item">星期五</div>
            <div class="item">星期六</div>
        </div>
        <!-- 月 -->
        <div class="calendar">
           
            <div class="item" v-for="(item,index) in calendarPrice" :key="index">
                <div class="input-group-addons" :class="{'activate':hasHoliday(item),'no_now':item.status!=1,'order-calendar':!isDisabled(item)}">
                    <div class="ban" v-if="item.holiday && !item.holiday.holiday">班</div>
                    <div class="xiu" v-if="item.holiday && item.holiday.holiday">休</div>
                    <div class="order" v-if="item.hasOrderCalendar">已预订</div>
                    <div class="day">
                        <span v-text="item.day"></span>
                    </div>
                    <div style="padding: 10px 0;">
                        <!-- <span v-text="item.lunar.lunarMonthCn"></span> -->
                        <span class="lunar" v-text="item.festival?item.festival:item.lunarVal?item.lunarVal:item.lunar.solarTerm?item.lunar.solarTerm:item.lunar.lunarDayCn"></span>
                        
                    </div>
                    <input type="number" :disabled="isDisabled(item)" class="form-control" v-model="calendarPrice[index].price" @focus="focus(item)" @blur="confirm(item)" placeholder="0.0">
                </div>
            </div>
        </div>
    </div>
</div>